<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart {
			width: 1500px;
			height: 1000px;
		}
	</style>
	<script src="js/echarts.js"></script>
</head>

<body>
	<div id="chart"></div>
	<script>
		var myChart = echarts.init(document.getElementById('chart'));
		var colors = ['#5793f3', '#d14a61', '#675bba'];

		myChart.setOption({
			color: colors,
			legend: {},
			grid: {
				right: "20%",
			},
			/* axisPointer:{
				show:true,
			}, */
			//tooltip:{
				//trigger:'axis',
				/* axisPointer:{
					type:'shadow',
					axis:'auto',
					snap:false,
					z:3,
					label:{
						show:true,
						formatter:'{value} ~',
						formatter:function(params){
							return params.value+' ~'
						},
						margin:20,
					},

					type:'line',
					lineStyle:{
						color:'hotpink',
						width:5,
						type:'dashed'
					},

					type:'shadow',
					shadowStyle:{
						color:'rgba(250,150,150,0.3)',
						shadowColor:'rgba(0,0,0,0.5)',
						shadowBlur:10,
					},

					type:'cross',
					crossStyle:{
						color:'blue',
						width:5,
					},

					animation:true,
				} */
			//},
			axisPointer:{
				show:true,
				//type:'line',

				value:10,	//这条属性要生效就必需配合下面的这条属性
				status:'show',
				handle:{
					show:true,
				},
				link:{},
				triggerOn:'click',
			},
			xAxis: {
				axisTick: {
					alignWithLabel: true
				},
				data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				/* axisPointer: {
					show: true,
				}, */
			},
			yAxis: [
				{
					//蒸发量
					name: '蒸发量',
					position: 'right',
					min: 0,
					max: 250,
					axisLabel: {
						formatter: '{value} ml',
					},
					axisLine: {
						lineStyle: {
							color: colors[0]
						}
					},
					/* axisPointer: {
						show: true,
					}, */
				},
				{
					//降水量
					name: '降水量',
					position: 'right',
					offset: 80,
					min: 0,
					max: 250,
					axisLabel: {
						formatter: '{value} ml',
					},
					axisLine: {
						lineStyle: {
							color: colors[1]
						}
					},
					/* axisPointer: {
						show: true,
					}, */
				},
				{
					//平均温度
					name: '温度',
					min: 0,
					max: 25,
					axisLabel: {
						formatter: '{value} °C',
					},
					axisLine: {
						lineStyle: {
							color: colors[2]
						}
					},
					/* axisPointer: {
						show: true,
					}, */
				},
			],
			series: [
				{
					name: '蒸发量',
					type: 'bar',
					yAxisIndex: 0,
					data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
				},
				{
					name: '降水量',
					type: 'bar',
					yAxisIndex: 1,
					data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
				},
				{
					name: '平均温度',
					type: 'line',
					yAxisIndex: 2,
					data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
				},
			]
		});
	</script>
</body>

</html>